<template>
    <div class="main">
        <div style="position: relative;height: 5vh;width: 97%;
        margin-left: 1.8%;box-shadow: 0px 0px 1px 1PX rgb(242, 240, 240);
        display: flex;align-items: center;">
            <el-button icon="el-icon-back" plain type="primary" @click="returnRoles()">返回</el-button>
        </div>

        <div style="position: relative;height: 1vh;"></div>
        <div style="position: relative;width: 97%;
        margin-left: 1.8%;box-shadow: 0px 0px 1px 1PX rgb(242, 240, 240);
        display: flex;align-items:flex-start;height: 75vh;overflow-y: scroll;flex-wrap: wrap;">

       

            <el-tree v-if="diplayTree" :data="list" show-checkbox default-expand-all node-key="menuId" ref="tree"
                :check-strictly="true" highlight-current :props="defaultProps" :default-checked-keys="listHightLight"
                @check-change="treeCheckX">
            </el-tree>



        </div>
    </div>
</template>
  
<script>
import AuthorityApi from '@/api/menuRequest.js'

export default {
    // 组件名称
    name: 'authority',
    // 组件参数 接收来自父组件的数据
    props: {},
    // 局部注册的组件
    components: {},
    // 组件状态值
    data() {
        return {
            //存放查询的值
            list: [],
            //是否高亮的值
            listHightLight: [],
            //是否展示树
            diplayTree: false,
            //孩子
            defaultProps: {
                children: 'roleAuthorityMenuList',
                label: 'menuName'
            }
        }
    },
    // 计算属性
    computed: {
        //获取权限的roleid
        getTrueRoleID() {
            return this.$store.getters['homex/GETROLEIDAUTO'];
        },
    },
    // 侦听器
    watch: {

    },
    // 组件方法
    methods: {
        //返回角色信息页面
        returnRoles() {
            this.$store.commit("homex/AUTOUPJUDGE",'rolesex');
        },
        //查询一个人的权限
        selectAuthority() {
            AuthorityApi.selectRoleAuthorityAll(this.getTrueRoleID).then(res => {
                this.list = res.data;
                this.selectTreeDataHightLight(res.data);
                this.diplayTree = true;
            })
        },
        //查询哪些数据应该被高亮
        selectTreeDataHightLight(valuejk) {
            // console.log(this.listHightLight);
            for (let i in valuejk) {
                if (valuejk[i].roleId != null || valuejk[i].roleId != undefined) {
                    this.listHightLight.push(valuejk[i].menuId);
                }
                if (valuejk[i].roleAuthorityMenuList.length > 0) {
                    this.selectTreeDataHightLight(valuejk[i].roleAuthorityMenuList);
                }
            }
        },
        //el-tree复选框被选中时的回调
        treeCheckX(checkedNodes, checkStatus1, checkStatus2) {
            let obj = {
                au_roleId: this.getTrueRoleID,
                au_menuId: checkedNodes.menuId
            }
            if (checkStatus1 == true) {
                AuthorityApi.insertAuthority(obj);
            } else if (checkStatus1 == false) {
                AuthorityApi.deleteAutority(obj);
            }

        },

    },


    // 以下是生命周期钩子   注：没用到的钩子请自行删除
    /**
    * 在实例初始化之后，组件属性计算之前，如data属性等
    */
    beforeCreate() {
    },
    /**
    * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
    */
    created() {

    },
    /**
    * 在挂载开始之前被调用：相关的 render 函数首次被调用。
    */
    beforeMount() {
        //查询权限
        this.selectAuthority();
    },
    /**
    * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
    * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
    */
    mounted() {
    },
    /**
    * 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
    * 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
    */
    beforeUpdate() {
    },
    /**
    * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
    * 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
    */
    updated() {
    },
    /**
    * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效
    */
    activated() {
    },
    /**
    * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效
    */
    deactivated() {
    },
    /**
    * 实例销毁之前调用。在这一步，实例仍然完全可用。
    */
    beforeDestroy() {
    },
    /**
    * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
    * 所有的事件监听器会被移除，所有的子实例也会被销毁。
    */
    destroyed() {
    }
}
</script> 
  
  
<style scoped   >
.main {
    position: relative;
}
</style>
  